<template>
	<view class="all_bg">
		<view class="all_title">
			<image src="../../static/img/power.png" mode="aspectFit" class="title_img"></image>
		</view>
		<view class="all_card">
			<!-- <view class="all_card_title">
				<view class="f_text">
					金额
				</view>
				<view class="s_text">
					0.00元
				</view>
			</view> -->
			<u-gap height="1" bg-color="#ebebeb" style="width: 80vw;margin-left: 7vw;"></u-gap>
			<view class="all_card_title">
				<view class="f_text">
					缴费用户
				</view>
				<view class="s_text">
					{{mainmsg.au_name}}
				</view>
			</view>
			<view class="all_card_title_av">
				<view class="f_text">
					缴费户号
				</view>
				<view class="s_text">
					{{mainmsg.kHao}}
				</view>
			</view>
			<view class="all_card_title_av">
				<view class="f_text">
					缴费单位
				</view>
				<view class="s_text">
					{{mainmsg.kName}}
				</view>
			</view>
			<view class="all_card_title_av2">
				<view class="i_text">
					输入金额
				</view>
				<view class="input_sin">
					￥<input type="text" :value="finMoney" class="input_input" placeholder="请输入缴费金额" placeholder-class="cl" />
				</view>
			</view>
			<u-gap height="1" bg-color="#ebebeb" style="width: 80vw;margin-left: 7vw;"></u-gap>
			<view class="costst">
				<view class="costMoney" @tap="getMonet('50')">
					50元
				</view>
				<view class="costMoney" @tap="getMonet('100')">
					100元
				</view>
				<view class="costMoney" @tap="getMonet('150')">
					150元
				</view>
			</view>
		</view>
		<view class="bottom-bot" @click="subit" id="buttomName">
			{{sunitName}}
		</view>
		<view class="bottom-bot2">
			此账户的缴费记录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sunitName:'立即缴费', //提交按钮名字
				finMoney:0,           //缴费金额
				token:"",     
				mainmsg:''
			}
		},
		onShow() {

		},
		onLoad(options) {
			this.token = uni.getStorageSync('token');
			this.mainmsg = uni.getStorageSync('mainmsg');
			if(options.kHao){
				this.mainmsg.kHao = options.kHao
			}
			if(options.kName){
				this.mainmsg.kName = options.kName
			}
			if(options.Id){
				this.mainmsg.titleId = options.Id
			}
		},
		methods: {
			getMonet(num){
				this.finMoney = num
			},
			subit(){
				if(this.sunitName === '缴费成功'){
					return;
				}
				let _this = this
				uni.request({
					url: _this.$title + 'PayMent/GetOfflineUserCzOrder',
					header: {
						'auth': _this.token
					},
					success: (res) => {
						let s = res.data.data
						let data = {
							"plp_chargecode":res.data.data,
							"PaymentAreaId":1,
							"r_money":_this.finMoney,
							"r_count":1,
							"pay_variety":_this.mainmsg.titleId,
							"r_cardid":'0362987663',  //用户卡号
							"r_addr":'测试1',		  //用户地址
							"r_phone":'13012345678',  //用户电话
							"r_homename":'我的家'	  //用户的家
						}
						
						// let data2 = {
						// 	'r_cardid':'03629876632',
						// 	'r_addr':'测试1',
						// 	'r_phone':'13012345678',
						// 	'r_homename':'我的家',
						// 	'r_money':'100',
						// 	'r_count':1,
						// 	'plp_chargecode':res.data.data,
						// 	'plp_czchaincode':'Xx0000001',
						// 	'data_param':'',
						// 	'plp_workercode':'U1766420211019192936',
						// 	'revphone':15044443333,
						// 	'pay_variety':'2',
						// 	'BranchstoreId':1,
						// 	'PaymentAreaId':1
						// }
						uni.request({
							url: _this.$title + 'SQB/GetOnLinePurchaseInfo',
							data:data,
							header: {
								'auth': _this.token
							},
							success: (res) => {
								if(res.data.status === 200){
									_this.sunitName = '缴费成功'
									var div = document.getElementById(
										'buttomName');
									div.setAttribute("class",
										"bottom-bot-after");
								}
							}
						});
					}
				});
			}
		}
	}
</script>

<style>
	.all_bg {
		background-color: #F1F1F1;
		height: 100vh;
		width: 100vw;
	}

	.all_title {
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title_img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-top: 120rpx;
	}

	.all_card {
		background-color: #FFFFFF;
		margin-left: 3vw;
		width: 94vw;
		height: 900rpx;
	}

	.all_card_title {
		padding-top: 120rpx;
		padding-left: 10vw;
		padding-bottom: 2vw;
		display: flex;
	}

	.all_card_title_av {
		padding-top: 40rpx;
		padding-left: 10vw;
		padding-bottom: 2vw;
		display: flex;
	}

	.all_card_title_av2 {
		padding-top: 40rpx;
		padding-left: 10vw;
		padding-bottom: 2vw;
	}

	.f_text {
		width: 25vw;
		color: #878787;
	}

	.s_text {
		width: 50vw;
		font-weight: 600;
	}

	.i_text {
		width: 100vw;
		font-weight: 800;
	}

	.input_sin {
		margin-top: 20rpx;
		display: flex;
		font-weight: bolder;
	}

	.input_input {
		font-size: 40rpx;
		letter-spacing: 5rpx;
	}

	.cl {
		font-size: 40rpx;
		letter-spacing: 5rpx;
		text-align: center;
		color: #c2c2c2;
	}
	
	.costst{
		display: flex;
		flex-direction:row;
		flex-wrap: nowrap;
		justify-content:space-around;
		margin-top: 40rpx;
		
	}
	.costMoney{
		background-color: #e4e8f1;
		width: 180rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-weight: 600;
	}
	
	.bottom-bot{
		background-color: #19BE6B;
		width: 90vw;
		margin-left: 5vw;
		height: 100rpx;
		color: #ffffff;
		text-align: center;
		line-height: 100rpx;
		font-size: 40rpx;
		font-weight: 600;
		position: fixed;
		bottom: 100rpx;
	}
	
	.bottom-bot-after{
		background-color: #babdb1;
		width: 90vw;
		margin-left: 5vw;
		height: 100rpx;
		color: #ffffff;
		text-align: center;
		line-height: 100rpx;
		font-size: 40rpx;
		font-weight: 600;
		position: fixed;
		bottom: 100rpx;
	}
	
	.bottom-bot2{
		height: 100rpx;
		color: #55aaff;
		width: 100vw;
		text-align: center;
		line-height: 100rpx;
		font-size: 10rpx;
		font-weight: 100;
		position: fixed;
		bottom: 0rpx;
	}
</style>
